<template>
  <div class="data-service-top pt116">
    <div class="main">
      <div class="data-service-top-con">
        <div class="data-service-top-title">数据查询服务</div>
        <ul class="flex data-service-top-type">
          <li
            v-for="(item, index) in seachTypes"
            :key="index"
            :class=" {active: serviceType == item.key }"
            @click="handlerServiceType(item.key)"
          >
            <span>{{ item.label }}</span>
          </li>
        </ul>
        <div class="data-service-top-input">
          <InputSearch
              v-model:value="search"
              placeholder="请输入你要查询的事项"
              enter-button="查一查"
              size="large"
              @search="handlerSearch">
            <template #prefix>
              <SearchOutlined />
            </template>
          </InputSearch>
        </div>
<!--     <ul class="flex data-service-top-hot" @click="noArticle">
          <li>热门搜索:</li>
          <li v-for="item in hots" :key="item.key">
            {{item.label}}
            &lt;!&ndash; <router-link to="/">{{item.label}}</router-link>&ndash;&gt;
          </li>
        </ul>-->
      </div>
    </div>
  </div>

</template>

<script lang="ts">
import { defineComponent, ref, PropType } from "vue";
import {Input, Tabs, Row, Col, Table, message} from "ant-design-vue";
import { SearchOutlined } from "@ant-design/icons-vue";
import { useRouter} from "vue-router";

// type
import type { configItem } from '/@/api/common';
interface seachItem extends configItem{
  key: string;
  path: string;
}
export default defineComponent({
  name: "ServiceSearch",
  components: {
    Input,
    InputSearch:Input.Search,
    Tabs,
    TabPane: Tabs.TabPane,
    TabContent: Tabs.TabContent,
    Row,
    Col,
    Table,
    SearchOutlined,
  },
  props: {
    serviceType: {
      type: String as PropType<string>,
      default: "",
    },
  },
  setup(props) {
    const search = ref('');
    const serviceType = ref(props.serviceType);
    const router = useRouter();

    const handlerServiceType = ( type: string ) => {
      if (type === "compList" || type === "staffList" || type === "proList") {
        serviceType.value = type;
      }
      else {
        //window.open('http://jsy.xjjs.gov.cn:8030/','_blank')
        window.open('http://jsy.xjjs.gov.cn:8030/','_self')
      }
    };

    const seachTypes = ref<seachItem[]>([
      { key: 'compList', path: "/compList", label: "查企业" },
      { key: 'staffList', path: "/staffList", label: "查人员" },
      { key: 'proList', path: "/proList", label: "查项目" },
      { key: 'sinceList', path: "http://jsy.xjjs.gov.cn:8030/", label: "查诚信" },
    ]);

    const hots = ref<configItem[]>([
      { key: 1, label: "登录" },
      { key: 2, label: "注册" },
      { key: 3, label: "二级建造师" },
      { key: 4, label: "施工许可" },
    ]);

    const noArticle = ()=>{
      message.warning('此功能暂未开放!');
    };

    const handlerSearch = () => {
      searchChange({
        search:search.value,
        type : serviceType.value
      })
    };

    const searchChange = (data) => {
      let { search , type } = data;

      if(type){
        router.push({
          path: '/'+type,
          query: { search: search }
        })
      }else {
        console.log('参数有误');
      }

    };

    //watchEffect(() => { search.value = unref(query).search as string; })


    return {
      search,
      seachTypes,
      hots,
      serviceType,
      handlerSearch,
      handlerServiceType,
      searchChange,
      noArticle
    };
  },
});
</script>

<style lang="less">
.data-service-top-input {
  .ant-input-affix-wrapper {
    height: 54px;
    background: white;
    border: 1px solid white;
    border-right: none;
    border-radius: 0;

    .ant-input-prefix {
      padding: 0 10px;
      font-size: 20px;
      color: #CD1922;
    }

    .ant-input {
      font-size: 16px;
      background: transparent;

      &::-webkit-input-placeholder {
        color: #999;
      }
    }

    &:hover {
      border-color: #fff;
    }
  }

  .ant-input-affix-wrapper-focused {
    box-shadow: none;
  }

}
</style>

<style lang="less" scoped>
.data-service-top {
  //background: linear-gradient(180deg, #435ffd 0%, #12b7fa 100%);
  background: url(/src/assets/img/service_bg.png) no-repeat center/cover;

  .main {
    height: 380px;

    .data-service-top-con {
      width: 780px;
      padding-top: 48px;
      margin: 0 auto;

      .data-service-top-title {
        margin-bottom: 56px;
        font-size: 32px;
        color: white;
        text-align: center;
      }

      ul.data-service-top-type {
        margin: 0;

        li {
          position: relative;
          width: 95px;
          margin: 0 10px 0 0;
          line-height: 42px;
          color: @white;
          text-align: center;
          cursor: pointer;
          border: 1px solid rgba(255, 255, 255, 0.15);
          border-bottom: none;
          border-radius: 5px 5px 0 0;
          user-select: none;

          &.active {
            color: @blue;
            background: @white;
          }

          &:hover {
            //font-weight: 600;
          }
        }
      }

      ul.data-service-top-hot {
        padding-top: 16px;

        li {
          margin-right: 12px;
          font-size: 13px;
          line-height: 26px;
          color: fade(@white, 70%);
          cursor: pointer;

          a {

            &:hover {
              font-weight: 600;
            }
          }
        }
      }
    }
  }
}

::v-deep(.router-link-active) {
  color: fade(@white, 70%);

  &:hover {
    font-weight: 600;
  }
}

::v-deep(.ant-input-group-addon) {
  background: transparent;

  .ant-btn-primary{
    height: 54px;
    padding: 0 25px;
    font-size: 14px;
    color: white;
    background: #CD1922;
    border-color: #CD1922;
    border-radius: 0;
    //transform: translateY(-1px);
  }

}

</style>

